<template>
  <div class="layout">
    <div class="box">
    <keep-alive ><router-view v-if='$route.meta.keepAlive'></router-view></keep-alive>
    <router-view v-if='!$route.meta.keepAlive'></router-view>
      <!-- <keep-alive :exclude="['my']" :include="['like','collect','home']"><router-view></router-view></keep-alive> -->
    </div>
    <ul>
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/collect">收藏</router-link></li>
      <li><router-link to="/like">喜欢</router-link></li>
      <li><router-link to="/my">我的</router-link></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
    console.log(this.$route.meta.keepAlive)//切到页面就可以得到那个页面的keepAlive值
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.layout {
  display: flex;
  height: 100vh;
  justify-content: space-between;
  flex-direction: column;

  .box {
    flex: 1;
    overflow: auto;
  }
  ul {
    display: flex;
    // position: fixed;
    // bottom: 0;
    width: 100%;
    height: 50px;

    // padding-bottom: 50px;
    list-style: none;
    box-sizing: border-box;
    li {
      box-sizing: border-box;
      margin: 10px;
      flex: 1;
       line-height: 30px;
      text-align: center;
      a {
        text-decoration: none;
      }
    }
  }
}
</style>
